<template>
	<view class="page">
		<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex balanceDetails_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between balanceDetails_fd0_0'>
				<view class='flex flex-wrap align-center balanceDetails_fd0_0_c0' @tap.stop="examOver('back')">
					<text class='fu-iconfont2  balanceDetails_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<!-- <view class='flex flex-wrap align-center'>
					<text class='balanceDetails_fd0_0_c1_c0'>模拟考试</text>
				</view> -->
				<view class="bulletin-text text-cut-2 text_title3 text0_title3" benkey="title3"
					@tap.stop="examOver('over')">交卷
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>


		<!-- <fu-top-navigation-bar :query="fuTopNavigationBar">
			<template #left-icon>
				<view class="component-element fu-iconfont icon_title0 icon0_title0" @tap.stop="examOver('back')">
					<text class='fu-iconfont2  balanceDetails_fd0_0_c0_c0'>&#xE794;</text>
				</view>
			</template>
			<template #title>
				<view class="bulletin-text text-cut-2 text_title1" benkey="title1">{{title}}</view>
			</template>
			<template #right-text>
				<view class="bulletin-text text-cut-2 text_title3 text0_title3" benkey="title3"
					@tap.stop="examOver('over')">交卷
				</view>
			</template>
		</fu-top-navigation-bar> -->
		<!---题型开始-->

		<view class="flex flex-wrap align-center justify-between benben-flex-layout flex_1">
			<text class="fd1_0">{{studyType[indexType].name}}</text>

			<view class="flex flex-wrap align-center fd1_1">
				<text>剩余时间 {{countdownText}}</text>
				<!-- <benben-countdown class="flex fd1_1_c1" background-color="#FAEEED" color="#C22A1B"
					splitor-color="#C22A1B" :show-colon="true" :start="true" :count-time="fd1_1_c1"></benben-countdown> -->
			</view>
		</view>

		<!---题型结束-->
		<!---题目开始-->

		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout flex_2">
			<!---标题开始-->

			<view class="flex flex-wrap align-center fd2_0">
				<image class="fd2_0_c0" :src="STATIC_URL + '309.png'"></image>
				<text class="fd2_0_c1">第{{allIndex}}题</text>
			</view>

			<!---标题结束-->

			<view class="flex flex-wrap align-center">
				<!-- <text class="fd2_1_c0">{{question.title}}</text> -->
				<jyf-Parser :html="question.title"></jyf-Parser>
			</view>
		</view>

		<!---题目结束-->
		<!---选项开始-->

		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout flex_3">
			<view class="flex flex-wrap align-stretch fd3_0" @click="selectAnswer(item,index1)"
				v-if="question.type==1 || question.type==2 || question.type==3" v-for="(item,index1) in question.option"
				:key="index1">
				<image class="fd3_0_c0" :src="item.default==0? STATIC_URL + '360.png' : STATIC_URL + '361.png'"></image>
				<text class="flex-sub fd3_0_c1">{{options[index1]}}.{{item.value}}</text>
			</view>
		</view>

		<!---选项结束-->
		<benben-popup v-model="popupShow1648542315716" :mask="true" mode="center">
			<!---交卷开始-->

			<view class="flex flex-direction flex-wrap align-center flex_4">
				<text class="fd4_0">确认交卷?</text>
				<!---交卷开始-->

				<view class="flex flex-wrap align-center fd4_1">
					<button class="fd4_1_c0" @tap.stop="popupShow1648542315716 = false">取消</button>
					<button class="fd4_1_c1" @tap.stop="handleJumpDiys">
						确定
					</button>
				</view>

				<!---交卷结束-->
			</view>

			<!---交卷结束-->
		</benben-popup>
		<benben-popup v-model="popupShow1648542855747" :mask="true" mode="center">
			<!---交卷开始-->

			<view class="flex flex-direction flex-wrap align-center flex_5">
				<text class="fd5_0">考试时间到 已自动交卷</text>
				<button class="fd5_1" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/practice/papersSubmitted/papersSubmitted`">
					确定
				</button>
			</view>

			<!---交卷结束-->
		</benben-popup>
		<benben-popup v-model="popupShow1648542690131" :mask="true" mode="center">
			<!---交卷开始-->

			<view class="flex flex-direction flex-wrap align-center flex_6">
				<text class="fd6_0">确定提前交卷吗？</text>
				<text class="fd6_1">{{popupText}}</text>
				<!---交卷开始-->

				<view class="flex flex-wrap align-center fd6_2">
					<button class="fd6_2_c0" @tap.stop="popupShow1648542690131 = false">取消</button>
					<button class="fd6_2_c1" @tap.stop="handleJumpDiys">
						确定
					</button>
				</view>

				<!---交卷结束-->
			</view>

			<!---交卷结束-->
		</benben-popup>
		<!---输入答案开始-->

		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout flex_7" v-if="question.type==4">
			<view class="flex flex-wrap align-center fd7_0">
				<image class="fd7_0_c0" :src="STATIC_URL + 'study22.png'"></image>
				<text class="fd7_0_c1">输入答案</text>
			</view>

			<textarea class="placeholder-style" confirm-type="done" :placeholder="'多行输入'" :maxlength="-1"
				placeholder-style="color:#BFBFBF;font-size:28rpx" v-model="fd7_1" />

			<view class="flex flex-wrap align-center justify-center fd7_2"><button class="fd7_2_c0"
					@click="answerSubmint">提交</button></view>
		</view>

		<!---输入答案结束-->
		<view class="flex flex-wrap align-center justify-between benben-position-layout flex flex_8">
			<view class="flex flex-wrap align-center" @tap.stop="lookDidTopic">
				<image class="fd8_0_c0" :src="STATIC_URL + '310.png'"></image>
				<text class="fd8_0_c1">{{allIndex}}</text>
				<text class="fd8_0_c2">/</text>
				<text class="fd8_0_c3">{{allQuestion.number}}</text>
			</view>

			<view class="flex flex-wrap align-center">
				<button class="fd8_1_c0" @click="previousStudy(questiontype,index)">上一题</button>
				<button class="fd8_1_c1" @click="nextStudy(questiontype,index)"
					v-show="allIndex != allQuestion.number">下一题</button>
				<button class="fd8_1_c1" @click="examOver('over')" v-show="allIndex == allQuestion.number">交卷</button>
			</view>
		</view>
		<view :style="{ height: '108rpx' }"></view>
		<benben-popup v-model="popupShow1648690698495" :mask="true" mode="bottom">
			<!---所有题目开始-->

			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout flex_9">
				<view class="flex flex-wrap align-center fd9_0">
					<text class="flex-sub fd9_0_c0">选择题目</text>
					<text class="fu-iconfont2 fd9_0_c1" @tap.stop="popupShow1648690698495 = false"></text>
				</view>

				<scroll-view scroll-y="true" class="all_study">
					<view>
						<view class="" v-for="(item,index) in topicNumber" :key="index">
							<text class="fd9_1"
								v-if="item.list.length>0">{{item.name}}（{{item.did}}/{{item.list.length}}）</text>

							<view class="flex flex-wrap align-center fd9_2">
								<view class="flex flex-wrap align-center fd9_2_c0"
									v-for="(item1,index1) in topicNumber[index].list" :key="index1"
									@click="selectStudy(item,index1,item1)">
									<button
										:class="{fd9_2_c0_c0:true,fd9_2_c0_c1:item1.flag}">{{(index1+1)>=10?(index1+1):'0'+(index1+1)}}</button>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!---所有题目结束-->
		</benben-popup>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue'
	export default {
		components: {
			jyfParser
		},

		data() {
			return {
				popupShow1648690698495: false, //当前做题弹窗
				fd7_1: '',
				popupShow1648542690131: false, //手动交卷未完全做完
				popupShow1648542855747: false, //考试时间到自动交卷
				popupShow1648542315716: false, //手动交卷
				fd1_1_c1: 360000,
				fuTopNavigationBar: {
					backgroundColor: '#fff',
					backgroundImage: '',
					notTake: true
				},
				subminttype: '', //交卷类型
				questiontype: 'radio', //当前题目类型
				index: 0, //当前题目数组下标
				allIndex: 1, //当前题目长度
				indexType: 0, //当前题目类型数组下标
				question: {}, //当前题目
				options: ['A', 'B', 'C', 'D', 'F', 'G', 'H'], //选项数组
				allQuestion: {}, //总题目
				// 题目总类型数组
				studyType: [{
						name: '单选',
						value: 'radio'
					},
					// {
					// 	name: '多选',
					// 	value: 'checkbox'
					// }, {
					// 	name: '判断',
					// 	value: 'judge'
					// }, {
					// 	name: '问答',
					// 	value: 'answer'
					// },
				],
				popupText: '',
				// 题目序号
				topicNumber: [],
				// 提交所有题目问题与答案
				submintAnwer: [],
				// 剩余时间倒计时
				countdownText: '',
				// 考试时间倒计时
				timer: '',
				// 剩余时间
				timeLeft: '',
				title: '章节测试',
			}
		},
		computed: {},
		watch: {},
		onLoad(options) {
			this.id = options.id;
			if (options.type == 2 || options.type == '2') {
				console.log(options.type)
				this.title = '模拟考试';
			}
			this.getStudyDetail();
		},
		onBackPress() {
			clearInterval(this.timer);
		},
		onReady() {},
		onShow() {
			clearInterval(this.timer);
		},
		onHide() {
			clearInterval(this.timer);
		},
		onPullDownRefresh() {},
		onReachBottom(e) {},
		onBackPress(options) {
			if (options.from === 'backbutton') {
				this.popupShow1648542690131 = true
				return true
			}
		},
		onPageScroll(e) {},
		methods: {
			getStudyDetail() {
				this.$api.post(global.apiUrls.post62569594bb37b, {
					id: this.id
				}).then(res => {
					if (res.data.code == 1) {
						console.log('试卷详情', res);
						console.log(res.data.data.sheet_info[this.questiontype])
						this.allQuestion = res.data.data;
						res.data.data.sheet_info[this.questiontype].list[this.index]
						this.question = res.data.data.sheet_info[this.questiontype].list[this.index];
						this.countdown(this.allQuestion.total_time)
					}
				})
			},
			// 下一题 type 当前的题目类型 index题目列表下标
			nextStudy(type, index) {
				// 判断当前题目下标长度，以及当前类型题目的数组长度是否一至，如果相等 则匹配题目类型列表，切换下一个类型
				if (this.allIndex == this.allQuestion.number) {
					return this.$message.info('这是最后一题，后边没有了！');
				}
				console.log(type, index, "type");
				if (this.allQuestion.sheet_info[type].list.length == index + 1) {
					this.questiontype = this.studyType[this.indexType + 1].value; //切换下一个类型
					this.question = this.allQuestion.sheet_info[this.questiontype].list[0]; //替换当前问题
					this.index = 0; //当前类型题目列表下标重置为0
					this.indexType++ //当前题目列表类型下标
					this.allIndex++; //题目总数
				} else {
					// 如果当前题目，在当前类型下数组下标不等于数组长度，直接切换当前题目数组的下一个题目；
					this.question = this.allQuestion.sheet_info[type].list[index + 1];
					// 并且当前题目数组下标加1
					this.index = index + 1;
					// 题目总数相加加
					this.allIndex++;
				}
			},
			// 上一题  type 当前的题目类型 index题目列表下标
			previousStudy(type, index) {
				// console.log('传入的值',type,index)
				// 判断当前的题目类型下标，当前题目列表下标 如果都是0 ，则说明当前时第一题
				if (this.indexType == 0 && index == 0) {
					// console.log('if')
					return this.$message.info('当前已是第一题');
				} else {
					// 判断当前题目下标，如果当前在数组题目列表的第一个，就需要切换题目类型
					if (index < 1) {
						// console.log('在这里')
						this.indexType--; //当前题目类型数组列表
						this.allIndex--; //当前坐在题目数
						// 更换题目类型
						this.questiontype = this.studyType[this.indexType].value;
						// 更换题目类型，则当前题目数组列表下标值等于数组长度
						this.index = this.allQuestion.sheet_info[this.studyType[this.indexType].value].list.length - 1;
						// 重新复制题目
						this.question = this.allQuestion.sheet_info[this.questiontype].list[this.index];
						// console.log(this.indexType,this.questiontype,this.index,this.question)
					} else {
						// 乳沟当前题目数组下标不为0 ，则直接减减题目数组小标就可以了，后重新获取题目就可以了
						this.allIndex--;
						this.index--;
						this.question = this.allQuestion.sheet_info[type].list[this.index];
					}
					// console.log(this.question)
				}
			},
			// 选择答案
			selectAnswer(item, index1) {
				console.log(item);
				// item.default==0?item.default=1:item.default=0
				if (this.indexType == 0 || this.indexType == 2) {
					// 单选  循环选项列表，给选中的选项改变选中值
					this.allQuestion.sheet_info[this.questiontype].list[this.index].option.map((item1, index) => {
						if (item1.id == item.id) {
							// item1.default == 0 ? item1.default = 1 : item1.default = 0;
							item1.default = 1
							// 判断当前选择的值时，如果是1则是选中状态说明改题 是做过的，否则就是没有做过的，在查看全部题时 会显示不同颜色
							if (item1.default == 1) {
								this.allQuestion.sheet_info[this.questiontype].list[this.index].flag = true;
							} else {
								this.allQuestion.sheet_info[this.questiontype].list[this.index].flag = false;
							}
						} else {
							item1.default = 0;
						}
						this.allQuestion.sheet_info[this.questiontype].list[this.index].option.splice(index, 1,
							item1);
					})
					console.log(this.allQuestion.sheet_info[this.questiontype].list[this.index].option, "打印");

				} else if (this.indexType == 1) {
					// 当前多选，可有多个选项
					this.allQuestion.sheet_info[this.questiontype].list[this.index].option.map((item1, index) => {
						if (item1.id == item.id) {
							item1.default == 0 ? item1.default = 1 : item1.default = 0;
							// 判断当前选择的值时，如果是1则是选中状态说明改题 是做过的，否则就是没有做过的，在查看全部题时 会显示不同颜色
							if (item1.default == 1) {
								this.allQuestion.sheet_info[this.questiontype].list[this.index].flag = true;
							} else {
								this.allQuestion.sheet_info[this.questiontype].list[this.index].flag = false;
							}
						}
						this.allQuestion.sheet_info[this.questiontype].list[this.index].option.splice(index, 1,
							item1)
					})
				}
				console.log('topicNumber', this.topicNumber)
			},
			// 查看做过的题目
			lookDidTopic() {
				this.topicNumber = [];
				this.studyType.map(item => {
					for (let key in this.allQuestion.sheet_info) {
						if (item.value == key) {
							this.allQuestion.sheet_info[key].value = item.value;
							this.allQuestion.sheet_info[key].name = item.name;
							this.topicNumber.push(this.allQuestion.sheet_info[key])
						}
					}
				})
				// 循环全部题目列表，判断不同题目类型下的题目列表，那个题目做了多少道题目
				this.topicNumber.map((item, index) => {
					let did = 0;
					item.list.map(item1 => {
						if (item1.flag) {
							did++;
						}
					})
					item.did = did;
				})
				this.popupShow1648690698495 = true;
			},
			// 问答题提交
			answerSubmint() {
				this.allQuestion.sheet_info[this.questiontype].list[this.index].answer = this.fd7_1;
				this.fd7_1 = '';
				// console.log(this.allQuestion.sheet_info[this.questiontype].list[this.index])
				// let obj = {
				// 	id:this.allQuestion.sheet_info[this.questiontype].list[this.index].id,
				// 	option
				// }
			},
			// 选择做过的题
			selectStudy(item, index1, item1) {
				this.questiontype = item.value;
				this.studyType.map((item1, index2) => {
					if (item1.value == this.questiontype) {
						this.indexType = index2;
					}
				})
				this.index = index1;
				this.question = item1;
				let arr = [];
				this.topicNumber.map(item => {
					arr.push(...item.list)
				})
				arr.map((item2, index3) => {
					if (item2.id == this.question.id) {
						this.allIndex = index3 + 1;
					}
				})
				this.popupShow1648690698495 = false;
			},
			// 考试结束
			examOver(type) {
				this.subminttype = type;
				// 循环处理拿到全部题目的对象
				let arr = []; //全部题目数组
				console.log(this.allQuestion.sheet_info, 'this.allQuestion.sheet_info');
				this.studyType.map(item => {
					for (let key in this.allQuestion.sheet_info) {
						if (item.value == key) {
							this.allQuestion.sheet_info[key].value = item.value;
							this.allQuestion.sheet_info[key].name = item.name;
							arr.push(this.allQuestion.sheet_info[key])
						}
					}
				})
				console.log(arr);
				// 组合成提交模式的数组
				let arr3 = []; //做完之后的题目答案组合
				let arr4 = []; //未做完题目的数组
				// 得到的全部题目的数组循环，先循环题目，后循环选项，然后组合拼装成相应的提交数据
				arr.map((item, index) => {
					console.log(item, 'itemitemitemitemitem');
					item.list.map((item1, index1) => {

						console.log(item1)
						if (item1.type == 4) {
							let obj = {
								id: item1.id,
								option_id: item1.answer
							}
							arr3.push(obj)
						} else {
							let arr2 = []
							if (item1.option) {
								item1.option.map((item2, index2) => {
									if (item2.default == 1) {
										// arr2.push(item2.id)
										arr2.push(index2)
									}
								})
								console.log(arr2, "arr2")
								let obj = {
									id: item1.id.toString(),
									option_id: arr2.join(',')
								}
								console.log(obj, "obj")
								arr3.push(obj)
							}
						}
					})
				})
				arr3.map(item => {
					if (item.option_id == '') {
						arr4.push(item.id);
					}
				})
				this.submintAnwer = arr3;
				console.log(this.submintAnwer, "this.submintAnwer");
				// 正常考试结束
				// 判断正常交卷时是否有题，没有则提示正常弹窗，有则提示缺题弹窗
				if (arr4.length > 0) {
					this.popupText = '您还有' + (arr4.length) + '题尚未答完，确定交卷吗？'
					this.popupShow1648542690131 = true;
				} else {
					this.popupShow1648542315716 = true;
				}
			},
			// 返回上一页
			handleEvenBack() {
				this.examOver();
			},
			// handleJumpDiyYes(url){
			// 	uni.navigateTo({
			// 		url:url
			// 	})
			// },
			// 确认交卷
			handleJumpDiys() {
				let subminttime = '';
				if (this.timeLeft == 0) {
					// subminttime = parseInt(this.allQuestion.total_time / 60 % 60);
					subminttime = this.allQuestion.total_time;
				} else {
					// subminttime = parseInt((this.allQuestion.total_time - this.timeLeft) / 60 % 60);
					subminttime = parseInt((this.allQuestion.total_time - this.timeLeft));
				}
				let data = {
					answer_info: JSON.stringify(this.submintAnwer),
					sheet_id: this.id,
					total_time: subminttime
				}
				console.log(data)
				// return
				this.$api.post(global.apiUrls.post62578f73c6304, data).then(res => {
					if (res.data.code == 1) {
						console.log('考试完成', res);
						this.popupShow1648542315716 = false;
						uni.$emit('EXAM_IS_OVEr');
						uni.navigateBack({
							delta: 1
						})
						// if(this.subminttype=='back'){
						// 	uni.navigateBack({
						// 		delta:1
						// 	})
						// }else{
						// 	uni.redirectTo({
						// 		url:'/pages/practice/papersSubmitted/papersSubmitted'
						// 	})
						// }
					}
				})
			},

			// 考试时间倒计时
			countdown(time) {
				let tims = time;
				let timer
				this.timer = setInterval(() => {
					let h = parseInt(tims / 60 / 60 % 24)
					h = h < 10 ? '0' + h : h
					let m = parseInt(tims / 60 % 60)
					m = m < 10 ? '0' + m : m
					let s = parseInt(tims % 60)
					s = s < 10 ? '0' + s : s
					this.countdownText = h + ' : ' + m + ' : ' + s;
					if (tims == 0) {
						clearInterval(this.timer);
						this.$api.post(global.apiUrls.post62578f73c6304, {
							answer_info: JSON.stringify(this.submintAnwer),
							sheet_id: this.allQuestion.id,
							total_time: parseInt(this.allQuestion.total_time / 60 % 60)
						}).then(res => {
							if (res.data.code == 1) {
								console.log('提交答案', res);
								this.popupShow1648542855747 = true;
								uni.$emit('EXAM_IS_OVEr');
							} else {
								this.$message.info(res.data.msg);
							}
						})
					}
					tims--;
					this.timeLeft = tims;
					// 作为返回值返回
				}, 1000);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fd9_0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.fd9_0_c0 {
		font-size: 36rpx;
		font-weight: 700;
		text-align: center;
	}

	.fd9_0_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.all_study {
		min-height: 500rpx;
		max-height: 900rpx;
		width: 100%;
		margin-top: 20rpx;
	}

	.fd9_1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		padding: 32rpx 32rpx 0rpx 32rpx;
	}

	.fd9_2 {
		padding: 0rpx 14rpx 40rpx 14rpx;
	}

	.fd9_2_c0 {
		margin: 32rpx 18rpx 0rpx 18rpx;
	}

	.fd9_2_c0_c0 {
		background: rgba(246, 246, 246, 1);
		background-size: 100% !important;
		line-height: 84rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		font-size: 32rpx;
		color: rgba(191, 191, 191, 1);
		padding: 0rpx 23rpx 0rpx 23rpx;
	}

	.fd9_2_c0_c1 {
		background: rgba(194, 42, 27, 0.39);
		color: #333;
	}

	.fd9_3 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.fd9_4 {
		padding: 0rpx 14rpx 72rpx 14rpx;
	}

	.fd9_4_c0 {
		margin: 32rpx 18rpx 0rpx 18rpx;
	}

	.fd9_4_c0_c0 {
		background: rgba(246, 246, 246, 1);
		background-size: 100% !important;
		line-height: 84rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		font-size: 32rpx;
		color: rgba(191, 191, 191, 1);
		padding: 0rpx 23rpx 0rpx 23rpx;
	}

	.flex_9 {
		background: #fff;
		background-size: 100% !important;
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.fd8_0_c0 {
		width: 38rpx;
		height: 38rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 22rpx 0rpx 32rpx;
	}

	.fd8_0_c1 {
		font-size: 38rpx;
		color: rgba(194, 42, 27, 1);
		font-weight: 400;
	}

	.fd8_0_c2 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.fd8_0_c3 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.fd8_1_c0 {
		border: 1px solid #ba231b;
		background: #fff;
		background-size: 100% !important;
		line-height: 64rpx;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		font-size: 24rpx;
		color: rgba(186, 35, 27, 1);
		padding: 0rpx 64rpx 0rpx 64rpx;
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.fd8_1_c1 {
		border: 1px solid #ba231b;
		background: rgba(194, 42, 27, 1);
		background-size: 100% !important;
		line-height: 64rpx;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		font-size: 24rpx;
		color: rgba(253, 223, 153, 1);
		padding: 0rpx 64rpx 0rpx 64rpx;
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.flex_8 {
		background: #fff;
		background-size: 100% !important;
		width: 750rpx;
		height: 108rpx;
		overflow: hidden;
		z-index: 10;
		bottom: 0rpx;
		background-size: 100% auto !important;
	}

	.fd7_0 {
		padding: 48rpx 0rpx 24rpx 0rpx;
	}

	.fd7_0_c0 {
		width: 32rpx;
		height: 22rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.fd7_0_c1 {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		line-height: 45rpx;
	}

	.placeholder-style {
		background: rgba(248, 248, 248, 1);
		background-size: 100% !important;
		width: 686rpx;
		height: 338rpx;
		background-size: 100% auto !important;
		padding: 24rpx 0rpx 0rpx 24rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.fd7_2 {
		padding: 56rpx 0rpx 32rpx 0rpx;
	}

	.fd7_2_c0 {
		background: rgba(194, 42, 27, 1);
		background-size: 100% !important;
		line-height: 64rpx;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		font-size: 24rpx;
		color: rgba(253, 223, 153, 1);
		padding: 0rpx 96rpx 0rpx 96rpx;
	}

	.flex_7 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.fd6_0 {
		font-weight: 800;
		font-size: 36rpx;
		color: #333;
		padding: 0rpx 0rpx 24rpx 0rpx;
	}

	.fd6_1 {
		font-weight: 500;
		font-size: 32rpx;
		color: #333;
	}

	.fd6_2 {
		margin: 45rpx 0rpx 0rpx 0rpx;
	}

	.fd6_2_c0 {
		border-top: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 0rpx 102rpx 0rpx 103rpx;
	}

	.fd6_2_c1 {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: rgba(194, 42, 27, 1);
		padding: 0rpx 100rpx 0rpx 101rpx;
	}

	.flex_6 {
		background: #fff;
		background-size: 100% !important;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 40rpx 0rpx 0rpx 0rpx;
	}

	.fd5_0 {
		font-weight: 700;
		font-size: 36rpx;
		color: #333;
		width: 189rpx;
	}

	.fd5_1 {
		border-top: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		font-size: 32rpx;
		color: rgba(194, 42, 27, 1);
		width: 540rpx;
		font-weight: 500;
		margin: 52rpx 0rpx 0rpx 0rpx;
	}

	.flex_5 {
		background: #fff;
		background-size: 100% !important;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 72rpx 0rpx 0rpx 0rpx;
	}

	.fd4_0 {
		font-weight: 700;
		font-size: 36rpx;
		color: #333;
	}

	.fd4_1 {
		margin: 87rpx 0rpx 0rpx 0rpx;
	}

	.fd4_1_c0 {
		border-top: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 0rpx 102rpx 0rpx 103rpx;
	}

	.fd4_1_c1 {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: rgba(194, 42, 27, 1);
		padding: 0rpx 100rpx 0rpx 101rpx;
	}

	.flex_4 {
		background: #fff;
		background-size: 100% !important;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 87rpx 0rpx 0rpx 0rpx;
	}

	.fd3_0 {
		line-height: 45rpx;
		margin: 0rpx 0rpx 40rpx 0rpx;
	}

	.fd3_0_c0 {
		width: 36rpx;
		height: 36rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 5rpx 24rpx 0rpx 0rpx;
	}

	.fd3_0_c1 {
		font-size: 32rpx;
	}

	.flex_3 {
		padding: 37rpx 32rpx 0rpx 32rpx;
	}

	.fd2_0 {
		line-height: 45rpx;
		padding: 0rpx 0rpx 32rpx 0rpx;
	}

	.fd2_0_c0 {
		width: 32rpx;
		height: 22rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.fd2_0_c1 {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(194, 42, 27, 1);
	}

	.fd2_1_c0 {
		border-bottom: 1px solid #eee;
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 62rpx;
		padding: 0rpx 0rpx 32rpx 0rpx;
	}

	.flex_2 {
		padding: 40rpx 32rpx 0rpx 32rpx;
	}

	.fd1_0 {
		font-weight: 500;
		font-size: 32rpx;
		color: #333;
		line-height: 45rpx;
	}

	.fd1_1 {
		color: rgba(194, 42, 27, 1);
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.fd1_1_c1 {
		background: transparent;
		background-size: 100% !important;
	}

	.flex_1 {
		background: rgba(250, 238, 237, 1);
		background-size: 100% !important;
		background-size: 100% auto !important;
		padding: 28rpx 32rpx 27rpx 32rpx;
	}

	.text_title3 {
		font-size: 32rpx;
		font-weight: 500rpx;
		width: 82rpx;
		color: rgba(186, 96, 34, 1);
	}

	.text0_title3 {
		color: rgba(186, 96, 34, 1);
	}

	.text_title1 {
		font-size: 36rpx;
		font-weight: 500rpx;
		width: 550rpx;
		color: #333;
	}

	.icon_title0 {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.icon0_title0 {
		color: #333;
	}

	.page {
		min-height: 100vh;
		background: url(https://oss.tiantianhuoke.com/m2503/wechat/study21.png) no-repeat, #fff;
		background-size: 100% auto !important;
	}

	.balanceDetails_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.balanceDetails_fd0_0_c2 {
		width: 100rpx;
		height: 88rpx;
	}

	.balanceDetails_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.balanceDetails_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.balanceDetails_fd0_0_c0 {
		width: 100rpx;
	}

	.balanceDetails_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}
</style>